<template>
  <div class="page-container">
    <div class="toolbar" style="padding-top:10px;padding-left:15px;">
      <el-form
        :inline="true"
        :model="dataForm"
        style="text-align:left;"
        ref="dataForm"
        :rules="dataFormRules"
        :size="size"
        class="form"
      >
        <el-row style="text-align: left;">
          <el-form-item label="密码：" prop="password">
            <el-input
              v-model="dataForm.password"
              type="password"
              disabled
              placeholder="建议定期修改密码，已保护账户安全"
              auto-complete="off"
            ></el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:left;">
        <el-button @click="$router.go(-1)">取消</el-button>
        <el-button type="primary" @click="changepass">修改</el-button>
      </div>
    </div>
    <!--新增编辑界面-->
    <el-dialog
      title="编辑"
      width="25%"
      :visible.sync="editDialogVisible"
      :close-on-click-modal="false"
    >
      <el-form
        :model="dataForm"
        label-width="150px"
        :rules="dataFormRules"
        ref="dataForm"
        :size="size"
        inline
      >
        <el-row class="searchDialog-input">
          <el-form-item label="ID：" prop="id" v-if="false">
            <el-input v-model="dataForm.id" :disabled="true" auto-complete="off" placeholder="请输入ID"></el-input>
          </el-form-item>
          <el-form-item label="原密码：" prop="oldpassword">
            <el-input
              v-model="dataForm.oldpassword"
              type="password"
              auto-complete="off"
              maxlength="20"
              placeholder="请输入原密码"
            ></el-input>
          </el-form-item>
          <el-form-item label="新密码：" prop="newpassword">
            <el-input
              v-model="dataForm.newpassword"
              type="password"
              auto-complete="off"
              maxlength="20"
              placeholder="请输入新密码"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码：" prop="confimpassword">
            <el-input
              v-model="dataForm.confimpassword"
              type="password"
              auto-complete="off"
              maxlength="20"
              placeholder="请输入确认密码"
            ></el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="editDialogVisible = false">{{$t('action.cancel')}}</el-button>
        <el-button :size="size" type="primary" @click.native="submitForm">{{$t('action.submit')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
import { mapState } from "vuex";
import Cookies from "js-cookie";
import ThemePicker from "@/components/ThemePicker";
import LangSelector from "@/components/LangSelector";
import Vue from "vue";

export default {
  name: "Login",
  components: {
    ThemePicker,
    LangSelector
  },
  data() {
    return {
      imgUpload: this.utils.getUpLoadHostForImg(),
      imageUrl: "",
      size: "small",
      response: {},
      file: {},
      fileList: {},
      imgs: "",
      goods: "goods",
      dataForm: {
        name: "",
        businesslicense: "",
        paperwork_photo: "",
        manager_photo: ""
      },

      dialogImageUrl: "",
      bill_photo_list: [],
      loading: false,
      dialogVisibleImage: false,
      editDialogVisible: false,
      loginForm: {
        account: "",
        password: "",
        captcha: "",
        src: ""
      },
      dataFormRules: {
        oldpassword: [
          { required: true, message: "请输入原密码", trigger: "blur" }
        ],
        newpassword: [
          { required: true, message: "请输入新密码", trigger: "blur" }
        ],
        confimpassword: [
          { required: true, message: "请输入确认密码", trigger: "blur" }
        ]
      },
      checked: true,
      customer_type_options: [],
      paperwork_type_options: [],
      trade_type_options: []
    };
  },
  methods: {
    changepass: function() {
      this.editDialogVisible = true;
    },
    // 编辑
    submitForm: function() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            var id = localStorage.getItem("id");
            this.editLoading = true;
            let params = Object.assign({}, this.dataForm);
            this.utils.request.editSysUserPassWord(params, data => {
              if (data.code == "0000") {
                this.editDialogVisible = false;
                this.$message({ message: "操作成功", type: "success" });
              } else {
                this.$message({
                  message: "操作失败," + data.msg,
                  type: "error"
                });
              }
            });
          });
        }
      });
    },
    Jump() {
      this.$router.go(-1);
    }
  },
  mounted() {
    // this.queryUserList();
  },
  computed: {
    ...mapState({
      themeColor: state => state.app.themeColor
    })
  }
};
</script>
<style  scoped lang='scss'>
/deep/ .form .el-input__inner {
  width: 200px !important;
}
 .el-form-item--mini.el-form-item,
 .el-form-item--small.el-form-item  {
      margin-bottom: 10px;
}
</style>
